<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	.bigBox {
		width: 1100px;
		margin: 0 auto;
	}

	/*设置左侧盒子大小*/
	.leftBox {
		border: 1px solid #000;
		float: left;
		position: relative;
		width: 350px;
		height: 350px;
	}

	.leftBox img {
		position: absolute;
		width: 300px;
	}

	.mark {
		width: 250px;
		height: 250px;
		position: absolute;
		z-index: 333;
		background: yellow;
		opacity: 0.5;
		/* 设置滤镜 */
		filter: alpha(opacity=50);
		/*默认隐藏*/
		display: none;
		cursor: move;
	}

	.rightBox {
		position: relative;
		width: 500px;
		height: 600px;
		float: left;
		border: 1px solid #000;
		overflow: hidden;
		/*设置右侧盒子默认隐藏*/
		display: none;
		margin-left: 10px;
	}

	.rightBox #daxie {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.items {
		
		position: absolute;
		width: 360px;
		height: 80px;
		top: 350px;
		left: 230px;
	}

	.items .item img {
		width: 60px;
		height: 60px;
	}

	.items .item {
		float: left;
		list-style: none;
		margin-right: 4px;
	}
</style>
</style>

<body>
	<!-- 外层最大的盒子 -->
	<div class="bigBox">
		<!-- 左侧的小盒子 -->
		<div class="leftBox" id="leftBox1">
			<img src="./img/cw1.png" alt="" id="xiaoxie">
			<div class="mark" id="mark1"></div>
		</div>
		<!-- 下面的商品小图标 -->
		<ul class="items">
			<li class="item"><img src="./img/cw1.png" alt="" class="item-img"></li>
			<li class="item"><img src="./img/cw2.png" alt="" class="item-img"></li>
			<li class="item"><img src="./img/cw3.png" alt="" class="item-img"></li>
			<li class="item"><img src="./img/cw4.png" alt="" class="item-img"></li>
			<!-- <li class="item"><img src="./images/img/cw1.png" alt="" class="item-img"></li> -->
		</ul>
		<!-- 右侧大盒子 放大图片 -->
		<div class="rightBox" id="rightBox1">
			<img src="./img/cw1.png" alt="" id="daxie">
		</div>
	</div>
	<script>

let item = document.getElementsByClassName("item");
let img = document.getElementsByClassName("item-img");
//创建一个下面商品小图标的数组，
let arr = ["./img/cw1.png","./img/cw2.png","./img/cw3.png","./img/cw4.png"];
//右侧大图片的数组
let bigArrImg = ["./img/cw1.png","./img/cw2.png"];
//设置左侧盒子的移入显示，移出隐藏事件
leftBox1.onmouseover = function(){
	mark1.style.display = "block"
	rightBox1.style.display = "block";
}
leftBox1.onmouseout = function(){
	mark1.style.display = "none"
	rightBox1.style.display = "none"
}
for(let i = 0; i < item.length;i++){
	item[i].index = i;
	item[i].onmouseover = function(){
		for(let j = 0; j< item.length;j++){
			item[j].style.border = "none"
		}
		this.style.border = "2px solid red";
		xiaoxie.setAttribute("src",arr[this.index])
		daxie.setAttribute("src",arr[this.index])
	}
}
// mark1.onmousemove = function(e){	，开始是这样写的，但是会出现，小黄盒子偏离现象
//为左侧盒子设置鼠标移动事件，给小黄盒子设置移动
leftBox1.onmousemove = function(e){
	var e = e||event;
	//设置鼠标x和y的最大移动距离
	var x = e.clientX-leftBox1.offsetLeft-mark1.offsetWidth/2
	var y = e.clientY-leftBox1.offsetTop-mark1.offsetHeight/2
	// 设置小黄盒子的最大移动距离
	var maxW = leftBox1.offsetWidth-mark1.offsetWidth;
	var maxH = leftBox1.offsetHeight-mark1.offsetHeight;
	if(x<0){
		x=0
	}
	if(y<0){
		y=0
	}
	if(x>maxW){
		x=maxW
	}
	if(y>maxH){
		y=maxH
	}
	mark1.style.left = x+"px";
	mark1.style.top = y+"px";
	// 右侧大盒子的实际移动距离是左侧的两倍，并且是相反的
	daxie.style.left = -x*2+"px"
	daxie.style.top = -y*2+"px"
}
	</script>
</body>

</html>